<template>
  <wd-tabs v-model="tab" sticky>
    <view v-for="(tabItem, index) in tabList" :key="index" class="bg-[#f5f5f5]">
      <wd-tab :title="tabItem.label">
        <div v-if="list.length">
          <div
            v-for="(item, j) in list"
            :key="item.id"
            class="px-16px"
            :class="{
              'pt-16px': j === 0,
              'pb-16px': j === list.length - 1
            }"
          >
            <wd-card type="rectangle">
              <template #title>
                <view class="flex items-center justify-between">
                  <view class="truncate w-180px text-16px font-500">
                    {{ item.taskName || item.content }}
                  </view>
                  <view
                    class="truncate text-12px text-right w-80px"
                    :class="[item.isDone ? 'color-red' : 'color-blue']"
                  >
                    {{ item.isDone ? '已提醒' : '待提醒' }}
                  </view>
                </view>
              </template>

              <view class="flex">
                <image
                  :src="item?.images?.split(',')[0]"
                  width="40"
                  height="40"
                  alt="joy"
                  style="
                    width: 40px;
                    height: 40px;
                    margin-right: 12px;
                    border-radius: 4px;
                  "
                />
                <view class="color-[#666]">
                  <view>开始日期: {{ item.date }}</view>
                  <view>执行时间: {{ item.time }}</view>
                  <view>
                    更新时间:
                    {{ formatUtcDate(item.updateTime, 'YYYY-MM-DD HH:mm:ss') }}
                  </view>
                  <view class="flex items-center">
                    类型：
                    <wd-tag custom-class="space" type="primary">
                      {{ item.tag }}
                    </wd-tag>
                  </view>
                </view>
              </view>
              <template #footer>
                <view>
                  <wd-button size="small" plain @click="handlePreview(item)">
                    预览
                  </wd-button>
                  <div class="mx-8px inline-block">
                    <wd-button
                      size="small"
                      plain
                      @click="
                        jump(
                          `/pages/moments/edit/index?id=${item.id}&type=copy`
                        )
                      "
                    >
                      复制
                    </wd-button>
                  </div>
                  <div v-if="!item.isDone" class="mx-8px inline-block">
                    <wd-button
                      size="small"
                      plain
                      @click="
                        jump(
                          `/pages/moments/edit/index?id=${item.id}&type=edit`
                        )
                      "
                    >
                      编辑
                    </wd-button>
                  </div>
                  <wd-button
                    size="small"
                    type="error"
                    @click="handleDel(item.id)"
                  >
                    删除
                  </wd-button>
                </view>
              </template>
            </wd-card>
          </div>
        </div>
        <wd-status-tip
          v-else
          image="content"
          custom-class="bg-white"
          tip="暂无内容"
        />
      </wd-tab>
    </view>
  </wd-tabs>

  <wd-toast />
  <wd-message-box />
</template>
<script lang="ts">
export default {
  options: {
    // styleIsolation: 'shared'
  }
};
</script>
<script setup lang="ts">
import { useDraft } from '@/composables';
import { jump } from '@/utils/common';
import { formatUtcDate } from '@/utils/date';

onShareAppMessage(() => ({
  title: '草稿箱',
  path: '/pages/moments/draft/index'
}));

onShareTimeline(() => ({
  title: '分享朋友圈'
}));

const { tab, tabList, list, handleDel, handlePreview } = useDraft();
</script>

<style lang="scss" scoped>
.page {
  height: 100vh;
}
</style>
